<div class="my-new-page">
  <!-- 页面头部 -->
  <div class="page-header">
    <div class="page-header-content">
      <h1 class="page-title">{{ pageTitle }}</h1>
      <div class="page-actions">
        <button nz-button nzType="primary" (click)="addUser()">
          <i nz-icon nzType="plus"></i>
          添加用户
        </button>
        <button nz-button (click)="refreshData()">
          <i nz-icon nzType="reload"></i>
          刷新
        </button>
      </div>
    </div>
  </div>

  <!-- 搜索区域 -->
  <div class="search-area">
    <nz-card [nzBordered]="false">
      <form nz-form [nzLayout]="'inline'">
        <nz-form-item>
          <nz-form-label>用户名</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入用户名" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>邮箱</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入邮箱" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button nz-button nzType="primary">
              <i nz-icon nzType="search"></i>
              搜索
            </button>
            <button nz-button class="ml-sm">
              重置
            </button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-card>
  </div>

  <!-- 表格区域 -->
  <div class="table-area">
    <nz-card [nzBordered]="false">
      <!-- 表格工具栏 -->
      <div class="table-toolbar">
        <div class="toolbar-left">
          <span class="table-info">共 {{ tableData.length }} 条数据</span>
        </div>
        <div class="toolbar-right">
          <button nz-button nzSize="small" (click)="setRow()">
            <i nz-icon nzType="edit"></i>
            测试修改
          </button>
        </div>
      </div>

      <!-- 数据表格 -->
      <st #st 
          [data]="tableData" 
          [columns]="columns"
          [loading]="loading"
          [noResult]="'暂无数据'"
          [bordered]="true"
          [size]="'middle'"
          [scroll]="{ x: '100%' }">
        <ng-template st-row="custom" let-item let-index="index">
          <nz-badge [nzCount]="index < 2 ? index + 1 : 0"></nz-badge>
        </ng-template>
      </st>

      <!-- 错误提示区域 -->
      <div *ngIf="hasError" class="error-area">
        <nz-result 
            nzStatus="error" 
            nzTitle="数据加载失败" 
            nzSubTitle="请检查网络连接或稍后重试">
          <div nz-result-extra>
            <button nz-button nzType="primary" (click)="refreshData()">
              重新加载
            </button>
          </div>
        </nz-result>
      </div>
    </nz-card>
  </div>
</div>